<template>
    <div class="caDeal-With">
        <div class="item" v-for="item in list" :key="item.guid">
            <el-checkbox 
                v-model="item.checked" 
                @change="select(item)"
                :disabled="isDisabled(item.checked)"
                >
                <span>{{item.name}}</span>
            </el-checkbox>
        </div>
    </div>
</template>

<script>

import { mapGetters } from 'vuex';

export default {
    head: {
    },
    props:{
        usedIdArr: {
            type: [Object,Array],
            default: () => ({})
        },
        isAllDisabled:{
            type: Boolean,
            default: false,
        },
    },
    components: {},
    data() {
        return {
            list:[],
            dialogVisible:false,
            currentCity:{},
        }
    },
    computed: {
        ...mapGetters({
            navigateData: 'navigate/navigateData'
        }),
    },
    watch: {
        navigateData: {
            handler(n, o) {
                this.getData()
            },
            deep:true,
        },
        usedIdArr: {
            handler(n, o) {
                this.findIdByChecked()
            },
            deep:true,
            immediate:true
        },
    },
    methods: {
        getData(){
            this.list = clone(this.navigateData.blcalist.navis);

            this.findIdByChecked();
        },
        setWheel(){
            var tabsContainer = document.querySelector(".caDeal-With");
            if(!tabsContainer) {return};
            tabsContainer.addEventListener("wheel", (event) => {
                event.preventDefault();
                tabsContainer.scrollLeft += event.deltaY;
            });
        },
        /**
         * 寻找选中状态的 id
         */
        findIdByChecked(){
            const that = this;
                for (let j = 0; j < that.list.length; j++) {
                    let item = that.list[j];
                    let res = that.usedIdArr.includes(item.guid);
   
                    item.checked = !!res ? true : false;       
                }
        },
        select(item){
            const that = this;
            let id = item.guid;
            let arr = [];

            if(item.checked){
                arr = [id,...that.usedIdArr];
            }else{
                arr = that.usedIdArr.filter(item => item != id);
            }
            this.$emit('update:usedIdArr', arr)
        },
        isDisabled(checked){
            let len = this.usedIdArr.length;
            if (len > 9 && !checked) {
                return true;
            } else {
                return false;
            }
        }
    },
    mounted() {
        this.setWheel();
        this.getData();
        // this.$emit('update:usedIdArr',['1'])
    },
    beforeDestroy() {},
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss'; 
    .caDeal-With {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .item{
            margin: 4px 0;
            width: 92px;
            margin-right: 10px;
        }
    }
</style>
 